<template>
   <div style=" margin-top:30px">
		 <div class="head"> 
				  <el-button type="primary" size="mini"><router-link to="/admin/productAdd" style="text-decoration: none;"><i class="el-icon-edit-outline">新增</i></router-link></el-button>
		搜索：<el-autocomplete v-model="searchValue"  placeholder="请输入内容" ></el-autocomplete> <el-button icon="el-icon-search" @click="searchbook()" circle></el-button>
				  <el-button size="mini" @click="AllupShelf()">批量上架</el-button>  <el-button size="mini" @click="AlldownShelf()">批量下架</el-button>
		</div>
<center>


<div class="deit">
    <div class="crumbs">
      <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
            <el-breadcrumb-item>书籍列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="cantainer">
			<el-table :data="ProductList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" >
							<el-table-column label="全选" width="60">
								<el-checkbox ></el-checkbox>
							</el-table-column>
  					 <el-table-column prop="id" label="书籍ID" width="120" align="center">
  					 </el-table-column>
  					 <el-table-column prop="productName" label="书籍名称" width="120">
  					 </el-table-column>
  					 <el-table-column prop="price" label="价格">
  					 </el-table-column>
							<el-table-column prop="spec" label="规格">
  					 </el-table-column>
							<el-table-column prop="stockQty" label="库存数量">
  					 </el-table-column>
							<el-table-column prop="imageUrl" label="图片">
								<template slot-scope="scops">
									<img :src="'http://localhost:8080/BMS/'+scops.row.imageUrl" alt="加载失败">
								</template>
  					 </el-table-column>
							<el-table-column prop="shelfStatus" label="是否上架">
								 <template slot-scope="scops">
										<div v-if="scops.row.shelfStatus==1">已上架</div>
										<div v-else-if="scops.row.shelfStatus==0">未上架</div>
									</template>
  					 </el-table-column>
							<el-table-column prop="id" label="操作" width="430" align="center">
								  <template slot-scope="scops">
								    
										<el-button type="primary" size="mini" icon="el-icon-edit" @click="updateProduct(scops.row.id)">编辑</el-button>
										  <el-button type="primary" size="mini" icon="el-icon-delete" @click="DeleteProduct(scops.row.id,scops.row.productName)">删除</el-button>
											 <el-button type="primary" size="mini" @click="uploadImage(scops.row.id)">上传<i class="el-icon-upload el-icon--right"></i></el-button>

									<el-button type="primary" size="mini"  @click="upShelf(scops.row.id)">上架</el-button>
									<el-button type="primary" size="mini"  @click="downShelf(scops.row.id)">下架</el-button>
					</template>
      </el-table-column>
    </el-table>
 									 <el-pagination style="margin-top:20px ;"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[4, 8]" 
                            :page-size="pagesize"        
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="ProductList.length">    
                    </el-pagination>
        </div>
    </div>
  </div>













	  <!--  此代码与上述代码一致，只是用于美化
			
			 <table border="1" cellspacing="0" width="1200px">
	      <thead>
	        <tr>
  								<th>书籍ID</th>
  								<th>书籍名称</th>
  								<th>价格</th>
  								<th>规格</th>
         					<th>库存数量</th>
                  <th>图片</th>
                  <th>是否上架</th>
         					<th>操作</th>
	          </tr>
	        </thead>
	        <tbody>
	            <tr v-for="item in ProductList" :key="item.id">
	              <td >{{item.id}}</td>
								<td >{{item.productName}}</td>
								<td >{{item.price}}</td>
								<td >{{item.spec}}</td>
								<td >{{item.stockQty}}</td>
								<td >{{item.imageUrl}}</td>
                <td >{{item.shelfStatus}}</td>
                <td style="	width: 20%;"><i class="el-icon-delete" @click="DeleteProduct(item.id)">	</i>
											<i class="el-icon-edit" @click="updateProduct(item.id)"></i>
										<i class="el-icon-upload" @click="uploadImage(item.id)"></i>
										 <el-button size="mini" round @click="upShelf(item.id)">上架</el-button>
										  <el-button size="mini" round @click="downShelf(item.id)">下架</el-button>
										</td>
	            
              </tr>
	   			
	        </tbody>
	    </table> -->
			</center>
	</div>
</template>

<script>

export default {
  name:"mangeProduct",
  	data(){
	
		return{
			
			searchValue:'',
			ProductList:[{
			id:[],
      catlogId:[],
      productName:[],
      price:[],
      spec:[],
      stockQty:[],
      refPrice:[],
      imageUrl:[],
      shelfStatus:[]

			}],
			currentPage:1, //初始页
       pagesize:4,    //    每页的数据
			
		}

	},mounted:function(){
	
		this.getProducts()
	},created() {
        this.handleUserList()
    }
	,methods:{
		//得到书籍记录
		getProducts:function(){
			this.$axios.get("/product/getproducts").then(
				res=>{
						this.ProductList=res.data;
						console.log(this.ProductList);
				}
			)
		},
		//删除书籍记录
		DeleteProduct:function(DeleteId,product){
			var admin=localStorage.getItem("admin")
			this.$axios.get("/product/deleteProduct",{params:{id:DeleteId,product:product,admin:admin}}).then(res=>{
				this.getProducts()
				if(res.data!=0){
					alert("删除成功")
				}else{
					alert("删除失败")
				}
			})
		},
		//上传图片，转到上传页面
		uploadImage:function(ImageId){
			
			console.log(ImageId)
			this.$router.push({	name:"productImage",	params:{imageId:ImageId	}
				}
			)
		}
		
		,
		//修改书籍，转跳到修改页面
		updateProduct:function(updateId){
			this.$router.push({
				name:"productUpdate",
				params:{updateId:updateId}
			})
		},

		//批量上架与下架
		AllupShelf:function(){
					this.$axios.get("/product/upShelfAll",).then(res=>{
						if(res!=0){
						alert("已经全部上架")
					this.$router.go(0)
						}
						else{
							alert("上架失败")
									this.$router.go(0)
						}
					})
		},
		AlldownShelf:function(){
				this.$axios.get("/product/downShelfAll").then(res=>{
					if(res!=0){
						alert("已经全部下架")
								this.$router.go(0)
						}
						else{
							alert("下架失败")
										this.$router.go(0)
						}
				})
		},

		//上架与下架
		upShelf:function(id){
			this.$axios.get("/product/upShelf",{params:{productId:id}}).then(res=>{
					this.getProducts()
				console.log(res)
			})
		},
		downShelf:function(id){
		this.$axios.get("/product/downShelf",{params:{productId:id}}).then(res=>{
				this.getProducts()
				console.log(res)
			})
		},
		searchbook:function(){
		this.$axios.get("/product/searchbook",{params:{search:this.searchValue}}).then(res=>{
			console.log(res)
			this.ProductList=res.data
		})
	},

		//分页
		handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
    handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
    handleUserList() {
            this.$axios.get('http://localhost:8080/BMS/product/getproducts').then(res => {  //这是从本地请求的数据接口，
                this.userList = res.body
            })
        }

	}

}
</script>

<style scoped>

 .head{
	position: relative;
	top:-40px;
	text-align: left;

} 
img{
	width: 40%;
	height: 40%;
}
</style>